<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="d3.js" charset="utf-8"></script>
    <script>
    window.onload=function (){
      let data=[
        {name: '1月', data: 375, color: '#CF0'},
        {name: '2月', data: 512, color: '#FC0'},
        {name: '3月', data: 290, color: '#0CF'},
        {name: '4月', data: 175, color: '#0FC'},
      ];

      let g=d3.select('body').append('svg')
        .attr('width', 800).attr('height', 600)
      .append('g');

      let pieGen=d3.pie()
        .value(json=>json.data)
        .sort((j1,j2)=>0)
        .padAngle(()=>{
          return 2*Math.PI/180;
        });

      let arcGen=d3.arc()
        .innerRadius(60)
        .outerRadius(230)
        .cornerRadius(20)

      let pieRes=pieGen(data);
      pieRes.forEach(pieData=>{
        let arcRes=arcGen(pieData);
        g.append('path')
          .attr('d', arcRes).attr('fill', pieData.data.color);
      });




      g.attr('transform', 'translate(400,300)');
    };
    </script>
  </head>
  <body>

  </body>
</html>
